<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
	<view class="page">
		<view class="list_head">
			<view class="list_info">

				<view class="list_info_top">
					<view class="list_top_left">
						<image class="list_top_img" :src="product_batch_info.avatar_url" mode=""></image>
						<view class="list_name_head">
							<view class="list_name">
								{{product_batch_info.product_name}}的追溯
							</view>
							<view class="list_time">
								{{product_batch_info.updated_at}}
							</view>
						</view>
					</view>
					<view class="list_top_right">
						<view class="list_top_right_msg">
							已读
						</view>
						<view class="iconfont icon-ellipsis"></view>
					</view>
				</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="list_msg_head" v-if="item.type == 'text'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item">
							{{item.value}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'textarea'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item">
							{{item.value}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'time'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item">
							{{item.value}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'date'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item">
							{{item.value}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'radio'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item">
							{{item.value}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'checkbox'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_item" v-for="(it,ind) in item.value" :key="ind">
							{{it}}
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'uploadImg'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_img">
							<view v-for="(it,ind) in item.value" :key="ind">
								<image @click="previewImage(it)" :src="it" mode=""></image>
							</view>
						</view>
					</view>
					<view class="list_msg_head" v-if="item.type == 'uploadVideo'">
						<view class="list_msg_head_title">
							{{item.key}}：
						</view>
						<view class="list_msg_head_img">
							<view v-for="(it,ind) in item.value" :key="ind">
								<video :src="it" :controls="false" :show-fullscreen-btn="false" :show-center-play-btn="false" mode="" @click="get_video(it)"></video>
							</view>
						</view>
					</view>

				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import source from "../../api/source/index.js";
	export default {
		data() {
			return {
				process_log_id: 0,
				list: [],
				product_batch_info: {}
			}
		},
		onLoad(e) {
			if (e.process_log_id) {
				this.process_log_id = e.process_log_id;
			}
			this.get_product_batch_process_log_detail();
			this.get_product_batch_process_log_read();
		},
		methods: {
			get_video(url){
				uni.navigateTo({
					url:'../videoValue/videoValue?url=' + url
				})
			},
			get_product_batch_process_log_read() {
				source.product_batch_process_log_read({
					process_log_id: this.process_log_id
				}).then((res) => {
				})
			},
			get_product_batch_process_log_detail() {
				source.product_batch_process_log_detail({
					process_log_id: this.process_log_id
				}).then((res) => {
					if (res.code == 0) {
						this.product_batch_info = res.product_batch_process_log_detail;
						var list = res.product_batch_process_log_detail.log_sheet;
						for (var i = 0; i < list.length; i++) {
							if (list[i].type == 'checkbox' || list[i].type == 'uploadImg' || list[i].type ==
								'uploadVideo') {
								list[i].value = JSON.parse(list[i].value)
							}
						}
						this.list = list;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			previewImage(url) {
				// 预览图片
				var tempFilePaths = [];
				tempFilePaths.push(url)
				uni.previewImage({
					urls: tempFilePaths,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏']
					}
				});
			},
			get_show() {
				uni.showActionSheet({
					itemList: ['A', 'B', 'C'],
					cancelColor: '#fff'
				});
			}
		}
	}
</script>
<style scoped>
	/* 列表 */
	.icon-ellipsis {
		font-size: 50rpx;
	}

	.list_msg_head_img video {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

	.list_msg_head_img image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
		margin-right: 20rpx;
	}

	.list_msg_head_img view {
		width: 92rpx;
		height: 92rpx;
		margin-right: 20rpx;
		margin-top: 15rpx;
	}

	.list_msg_head_img {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}

	.list_msg_head_item {
		font-size: 32rpx;
		color: #262626;
	}

	.list_msg_head_title {
		font-size: 32rpx;
		color: #000000;
		font-weight: 600;
	}

	.list_msg_head {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 15rpx;
	}

	.list_top_right_msg {
		width: 76rpx;
		height: 38rpx;
		background-color: #F2F2F2;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		color: #8C8C8C;
		margin-right: 17rpx;
		border-radius: 90rpx;
	}

	.list_top_right {
		display: flex;
		align-items: center;
	}

	.list_top_right_img {
		width: 32rpx;
		height: 6rpx;
	}

	.list_time {
		color: #8C8C8C;
		font-size: 24rpx;
	}

	.list_name {
		font-size: 32rpx;
		color: #262626;
		font-weight: 600;
	}

	.list_name_head {
		margin-left: 16rpx;
	}

	.list_top_img {
		width: 68rpx;
		height: 68rpx;
		border-radius: 10rpx;
	}

	.list_top_left {
		display: flex;
		align-items: center;
	}

	.list_info_top {
		width: 95%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 20rpx;
		padding-bottom: 42rpx;
	}

	.list_info {
		width: 95%;
		margin: 0 auto;
		border-radius: 25rpx;
		padding: 30rpx 0;
	}

	.list_head {
		width: 100%;
		background: #FFFFFF;
		margin-top: 20rpx;
	}

	/* <!-- 分类 --> */
	.page {
		background: rgb(242, 242, 242);
		min-height: 100vh;
		width: 100%;
	}
</style>
